상품 Q&A 게시물 수정 페이지

📚 목차

• 아이디값과 일치하는 Qna 데이터 가져오기
• 수정한 데이터 서버로 올리기

아이디값과 일치하는 Qna 데이터 가져오기

• useParams로 데이터 아이디값 찾고 해당 값으로 데이터 값 인풋 기본값으로 넣어주기

  const { id } = useParams();

   // 데이터 가져오기
  useEffect(() => {
    const getCurrentQnaData = async () => {
      const res = await axiosInstance.get(`/posts/${id}`);

      const currentQna = res.data.item;

      if (titleRef && titleRef.current) {
        titleRef.current.value = currentQna.title;
        setContent(currentQna.content);
        setSelectId(currentQna.product_id);
        if (currentQna.extra.attachFile) {
          setAttachFile(currentQna.extra.attachFile);
        }
      }
    };

    getCurrentQnaData();
  }, [setContent, setSelectId]);```

## 수정한 데이터 서버로 올리기
* 수정한 데이터 값 객체 받아 해당 아이디값 patch하

```js
  // Qna 등록하기 (Axios)
  const handleRegistQna = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!content) {
      toast('내용을 입력해주세요 :)', {
        icon: '⭐',
        duration: 2000,
      });
    } else if (!selectData) {
      toast('상품을 선택해주세요 :)', {
        icon: '⭐',
        duration: 2000,
      });
    } else if (titleRef.current) {
      const editQna = {
        title: titleRef.current.value,
        content,
        product_id: selectId,
        extra: {
          attachFile: attachFile,
          product_name: selectData.name,
          product_image: selectData.detailImages[0],
        },
      };

      const response = await axiosInstance.patch(`/posts/${id}`, editQna);

      if (response.data.ok === 1) {
        toast('수정되었습니다 :)', {
          icon: '⭐',
          duration: 2000,
        });

        navigate(`/qna-detail/${response.data.updated._id}`);
      }
    }
  };